<template>
  <div class="app-container">
    <div class="filter-container">

      <!-- <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button> -->
    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="driverName"
        label="司机名称"
        align="center"
        width=""
      />
      <el-table-column
        prop="driverPhone"
        label="司机电话"
        align="center"
        width=""
      />
      <el-table-column
        label="油卡类型"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.typeId | typeFilter1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="oilCardNum"
        label="卡号"
        align="center"
        width=""
      />
      <el-table-column
        prop="created"
        label="申请时间"
        align="center"
        width=""
      />
      <el-table-column
        prop="cashMoney"
        label="充值金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="payMoney"
        label="用户支付金额"
        align="center"
        width=""
      />
   <!--   <el-table-column
        prop="alreadyMoney"
        label="平台支付金额"
        align="center"
        width=""
      />-->
      <el-table-column
        prop="handleUserName"
        label="处理人"
        align="center"
        width=""
      />
      <el-table-column
        prop="handleTime"
        label="处理时间"
        align="center"
        width=""
      />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import checkPermission from "@/utils/permission"; // 权限判断函数

import {
  getOilSupplyList,
  createOilSupply,
  getallAgent,
  business,
  getPageCooVerify,
  cooperationAll,
  addCooVerify,
  walletTradeList,
  getAllBuyOilByPage,
  getAllOilRechargeByPage
} from "@/api/v1";
import { supplyUnBind } from "@/api/user";

import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { parseTime } from "@/utils";
import addImgall from "@/components/img";
import provinceData from "@/components/province";

export default {
  name: "rechargeCard2",
  filters: {
    typeFilter1(role) {
      switch (role) {
        case 1:
          return "中石油";
        case 2:
          return "中石化";
      }
    },
    typeFilter2(role) {
      switch (role) {
        case 1:
          return "上门自取";
        case 2:
          return "快递";
      }
    }
  },
  directives: { waves, permission },
  components: { Pagination, addImgall, provinceData },
  data() {
    return {
      editPhone: true,
      imageUrl: "",
      tableData: [],
      allAgent: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      listQuery: {
        page: 1,
        limit: 20,
        sort: "+id",
        cooId: "",
        startDay: "",
        endDay: ""
      },
      key: 1, // table key
      dialogFormVisible: false,
      rules: {
        inputEndMoney: [
          { required: true, message: "请输入对账金额", trigger: "blur" }
        ],
        cooId: [{ required: true, message: "请选择加油站", trigger: "change" }]
      },
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增"
      },
      temp: {
        inputEndMoney: "",
        cooId: ""
      },
      isAdmin: true
    };
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },

  created() {
    this.getList();
  },
  methods: {
    getCooperationAll() {
      cooperationAll().then(res => {
        this.cooperation = res.data;
      });
    },
    resetTemp() {
      this.temp.inputEndMoney = "";
      this.temp.cooId = "";
    },
    handleCreate(role) {
      this.resetTemp();
      console.log(this.temp);
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.editPhone = false;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },
    createData() {
      this.$refs["temp"].validate(valid => {
        if (valid) {
          addCooVerify(this.temp).then(res => {
            // this.list.unshift(this.temp);
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.getList();
          });
        }
      });
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      console.log(row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$refs.provinceData.getCityData();
      this.editPhone = true;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },
    getList() {
      this.listLoading = true;
      this.listQuery.state = 1;
      getAllOilRechargeByPage(this.listQuery).then(res => {
        this.tableData = res.data.records;
        this.total = Number(res.data.total);
      });
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>

